<link rel="stylesheet" href="{{base_url()}}syslib/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.selection.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.filter.js"></script>		
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdata.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxlistbox.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/gettheme.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxnumberinput.js"></script>
{{$controller = $smarty.const.CCTRL}}
{{$token = $smarty.const.TOKEN}}
<div class="pr2 frmjqxgrid">
    <div class="grid_x pr8">
        <div id="jqxGrid"></div>
    </div>
    <div class="grid_x pr8">
        <div id="jqxdistrictGrid"></div>
    </div>
    <div class="grid_x pr8">
        <div id="jqxwardGrid"></div>
    </div>
    <div class="clear"></div>
</div>
<pre>

Khi trạng thái của Tỉnh/Thành phố được kích hoạt thì sẽ có thể quản lý các sản phẩm cho Tỉnh/Thành phố này.
Trạng thái cho biết Tỉnh/Thành phố, Quận/Huyện, Phường/Xã có áp dụng khi người dùng tùy chỉnh địa chỉ giao hàng.
</pre>
<script type="text/javascript">
    var myjqxGrid= (function () {
        var myGrid=$("#jqxGrid");
        var theme=getTheme();
        var source ={
            datatype: "json",
            type        :   "POST",
            datafields  : [
                { name: 'ID', type: 'int' },
                { name: 'TenTinhThanh', type: 'string' },
                { name: 'Status', type: 'bool' }
            ],
            url         : '{{base_url()}}APanel/{{$controller}}/jqgrid_city/',
            filter      : function(){ 
                myGrid.jqxGrid('updatebounddata', 'filter') 
            },
            sort        : function(){ 
                myGrid.jqxGrid('updatebounddata') 
            },
            root        : 'Rows',
            beforeprocessing: function(data){		
                    source.totalrecords = data[0].TotalRows;					
            }
        };	
        var dataadapter = new $.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error){
                tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
            }
        });
        var columns=[
            { text: 'Mã Tỉnh', datafield: 'ID', width: 80, filterable: false,hidden:true,editable:false},
            { text: 'Tỉnh / Thành phố', datafield: 'TenTinhThanh',editable:false},
            { text: 'Trạng thái', datafield: 'Status',  width: 80,filterable: false, columntype: 'checkbox',threestatecheckbox:false,editable:true }
        ];
        //Adding event listeners
        function _addEventListeners() {
            $("#jqxGrid").bind('rowselect', function (event) {
                try{
                    event.args.rowindex;
                    $('#jqxwardGrid').jqxGrid('clear');
                    var rowData=$("#jqxGrid").jqxGrid('getrowdata', event.args.rowindex);
                    var ID = rowData.ID;
                    var qSource ={
                        datatype: "json",
                        type        :   "POST",
                        datafields  : [
                            { name: 'ID', type: 'int' },
                            { name: 'TenQuanHuyen', type: 'string' },
                            { name: 'Status', type: 'bool' }
                        ],
                        url         : '{{base_url()}}APanel/{{$controller}}/jqgrid_district/'+ID,
                        filter      : function(){ 
                            $("#jqxdistrictGrid").jqxGrid('updatebounddata', 'filter') 
                        },
                        sort        : function(){ 
                            $("#jqxdistrictGrid").jqxGrid('updatebounddata') 
                        },
                        root        : 'Rows',
                        beforeprocessing: function(data){		
                                source.totalrecords = data[0].TotalRows;					
                        }
                    };	
                    var qDataadapter = new $.jqx.dataAdapter(qSource, {
                        loadError: function(xhr, status, error){
                            tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
                        }
                    });
                    // update data source.
                    $("#jqxdistrictGrid").jqxGrid({ 
                        width:'320px',
                        source: qDataadapter,
                        theme: theme,
                        sortable: true,
                        rendergridrows: function(obj)
                        {
                            return obj.data;    
                        },
                        filterable: true,
                        autoshowfiltericon: true,
                        showfilterrow: true,
                        editable:true,
                        editmode:'dblclick',
                        //selectionmode:'multiplerowsextended',
                        height:'500',
                        //virtualmode: true,
                        columns: [
                            { text: 'Mã', datafield: 'ID', width: 80, filterable: false,hidden:true,editable:false},
                            { text: 'Quận / Huyện', datafield: 'TenQuanHuyen',editable:false},
                            { text: 'Trạng thái', datafield: 'Status',  width: 80,filterable: false,columntype: 'checkbox',threestatecheckbox:false,editable:true }
                        ],
                        pageable :    false 
                    });
                }catch(e){ tipMessage(e.message); }
            }).bind('cellendedit', function (event) {
                try{
                    var args = event.args;
                    var Column = args.datafield ,Row = args.rowindex,Value = args.value;
                    var Data=$("#jqxGrid").jqxGrid('getrowdata', Row);
                    var ID=Data.ID;
                    if(ID==undefined || ID==""){
                        return;
                    }
                    switch(Column){
                        case "Status":
                            myjqxGrid.StatusChange("b8e676c6643d1b6ad18da6a30fa75d37",ID,Value);
                            break;
                        default:
                        tipMessage("Unkown this cell. Maybe 'editable' of this colums is 'off'"); 
                    }
                }catch(e){
                    tipMessage(e.message);
                    console.log("Error:"+e.message);
                }
            });
            $("#jqxdistrictGrid").bind('rowselect', function (event) {
                try{
                    event.args.rowindex;
                    var rowData=$("#jqxdistrictGrid").jqxGrid('getrowdata', event.args.rowindex);
                    var ID = rowData.ID;
                    var wSource ={
                        datatype: "json",
                        type        :   "POST",
                        datafields  : [
                            { name: 'ID', type: 'int' },
                            { name: 'TenPhuongXa', type: 'string' },
                            { name: 'Status', type: 'string' }
                        ],
                        url         : '{{base_url()}}APanel/{{$controller}}/jqgrid_ward/'+ID,
                        filter      : function(){ 
                            $("#jqxwardGrid").jqxGrid('updatebounddata', 'filter');
                        },
                        sort        : function(){ 
                            $("#jqxwardGrid").jqxGrid('updatebounddata');
                        },
                        root        : 'Rows',
                        beforeprocessing: function(data){		
                                source.totalrecords = data[0].TotalRows;					
                        }
                    };	
                    var wDataadapter = new $.jqx.dataAdapter(wSource, {
                        loadError: function(xhr, status, error){
                            tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
                        }
                    });
                    // update data source.
                    $("#jqxwardGrid").jqxGrid({ 
                        width:'320px',
                        source: wDataadapter,
                        theme: theme,
                        sortable: true,
                        rendergridrows: function(obj)
                        {
                            return obj.data;    
                        },
                        filterable: true,
                        autoshowfiltericon: true,
                        showfilterrow: true,
                        editmode:'dblclick',
                        //selectionmode:'multiplerowsextended',
                        height:'500',
                        //virtualmode: true,
                        columns: [
                            { text: 'Mã', datafield: 'ID', width: 80, filterable: false,hidden:true},
                            { text: 'Phường / Xã', datafield: 'TenPhuongXa'},
                            { text: 'Trạng thái', datafield: 'Status',  width: 80,filterable: false,columntype: 'checkbox',threestatecheckbox:false }
                        ],
                        pageable :    false 
                    });
                 }catch(e){ tipMessage(e.message); }
            }).bind('cellendedit', function (event) {
                try{
                    var args = event.args;
                    var Column = args.datafield ,Row = args.rowindex,Value = args.value;
                    var Data=$("#jqxdistrictGrid").jqxGrid('getrowdata', Row);
                    var ID=Data.ID;
                    if(ID==undefined || ID==""){
                        return;
                    }
                    switch(Column){
                        case "Status":
                            myjqxGrid.StatusChange("e74c893880ece24e78ac7faaa8d9b4e1",ID,Value);
                            break;
                        default:
                        tipMessage("Unkown this cell. Maybe 'editable' of this colums is 'off'"); 
                    }
                }catch(e){
                    tipMessage(e.message);
                    console.log("Error:"+e.message);
                }
            });
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {

        };
        //Creating the demo window
        function _createWindow() {
            
        };
        function _createGrid(){
            try{
                var gridconfig={
                    width:'320px',
                    source: dataadapter,
                    theme: theme,
                    sortable: true,
                    rendergridrows: function(obj)
                    {
                        return obj.data;    
                    },
                    filterable: true,
                    autoshowfiltericon: true,
                    showfilterrow: true,
                    editable:true,
                    editmode:'dblclick',
                    //selectionmode:'multiplerowsextended',
                    height:'500',
                    //virtualmode: true,
                    columns: columns,
                    pageable :    false
                };
                myGrid.jqxGrid(gridconfig);
                //handleEvent_jqxGrid(myGrid);
            }catch(e){ tipMessage(e.message); }
        }
        return {
            Init:function(){
                _createGrid();
                _addEventListeners();
                
            },
            Refresh:function(){
                console.log("Refresh ↵ Call");
                myGrid.jqxGrid('updatebounddata');
            },
            StatusChange:function(Token,ID,Status){
                try{
                    console.log("ChangeStatus:\nID:"+ID+"\tStatus:"+Status+" ↵ Call");
                    var url,data;
                    url="{{base_url()}}APanel/fe548e5a964095e7c80cd8d3721be2ef/ChangeStatus/"+Token+"/{{$controller}}";
                    data={
                        ID      :   ID,
                        Status  :   Status
                    }
                    isrunning=true;
                    jqxAjax(url,data,function(result){
                        isrunning=false;
                        if(result.code>=0){

                        }else{
                            tipMessage(result.msg);
                        }
                    });
                }catch(e){
                    console.log("JSON Error:"+e.message+"\n↵ Error");
                    tipMessage(e.message);
                    //ShowErrorDialogMessage("Sorry. Your request could not be completed.<br/> Please check your input data.");
                }
            }
        }
    } ());
    $(document).ready(function () {
        myjqxGrid.Init();
    });
</script>
<style>
    #jqxGrid,#jqxGrid *{
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        font-family: tahoma;
        font-size: 11px;
    }
    .jqx-widget-content,.jqx-calendar-footer{
        font-family: tahoma;font-size: 11px;line-height: 16px
    }
</style>
&check;
&Rarr;
&circlearrowleft;